<!-- 
  业务：
    0. 获取当前地理位置，进行地图中心点设置
    1. 获取全部的交易记录并在地图中标注
    2. 标注点，点击进入交易详情页面
    3. 页面底部，有一个按钮，点击跳转到新增交易页面
 -->
<template>
  <map
    id="map"
    :longitude="appStore.location.lng"
    :latitude="appStore.location.lat"
    :markers="markers"
    @markertap="handleMarkerTap"
  ></map>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from "vue";
import { useAppStore } from "@/stores/app";

const appStore = useAppStore();

const list = ref<any[]>([]);

const markers = computed(() => {
  // 基于 list 数组，计算出 标注点的数组格式
  return list.value.map((item) => ({
    id: item.id,
    longitude: item.lng,
    latitude: item.lat,
    width: 50,
    height: 60,
  }));
});

// 处理标注点点击
const handleMarkerTap = (e: any) => {
  console.log("handleMarkerTap", e);
  // 获取到标注点的Id
  const { markerId } = e.detail;
  // 跳转到详情页面
  uni.navigateTo({
    url: "/pages/trade/detail/index?id=" + markerId,
  });
};

// 获取数据
const fetchList = async () => {
  // 不设置 success\fail\complete uni.request 将返回Promise
  const resp: any = await uni.request({
    url: "http://127.0.0.1:7001/trade/list",
    method: "GET",
  });
  // resp.data.data 才是我们要的数组
  list.value = resp.data.data;
};

onMounted(() => {
  fetchList();
});
</script>

<style lang="scss">
#map {
  width: 100%;
  height: 100%;
}
</style>
